<template>
  <el-form ref="user" :model="user" :rules="rules">
    <div class="shopInfo">
      <el-row>
        <el-col :span="14">
          <el-form-item label="店铺名称：" prop="shopName">
            <el-input v-model.trim="user.shopName" />
          </el-form-item>
          <!-- <el-form-item label="店铺微信：">
            <el-input v-model.trim="user.shopContactWexin" />
          </el-form-item>
          <el-form-item label="店铺QQ：">
            <el-input v-model.trim="user.shopContactQq" />
          </el-form-item> -->
          <el-form-item label="店铺联系人：" prop="shopContactName">
            <el-input v-model.trim="user.shopContactName" />
          </el-form-item>
          <el-form-item label="联系电话：" prop="shopContactMobile">
            <el-input v-model.trim="user.shopContactMobile" />
          </el-form-item>
          <el-form-item label="店铺地址：" prop="shopAddress">
            <el-input v-model="user.shopAddress" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" />
          </el-form-item>
          <el-form-item label="注册资金：">
            <div class="flexInput">
              <el-input v-model.trim="user.shopMoney" type="number" />万元
            </div>
          </el-form-item>
          <!-- <el-form-item label="退款率">
            <div class="flexInput">
              <el-input v-model.trim="user.shopRefundRate" type="number" />%
            </div>
          </el-form-item> -->
          <el-form-item label="经营范围：">
            <el-input v-model.trim="user.shopRange" />
          </el-form-item>
          <el-form-item label="交货周期：">
            <el-input v-model.trim="user.shopDealDay" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="店铺背景图:" style="margin-left: 30px;margin-bottom: 30px;">
            <UploadImage :image.sync="user.shopBackendImage" :limit="1" :type=2 />
            <!-- <Upload :default-image.sync="user.shopBackendImage" :validWidth="1800" :validHeight="300" :mode="6" />
						<span style="color:#ff8704;">图片限制1800*300</span> -->
          </el-form-item>
          <el-form-item label="店铺介绍图:" style="margin-left: 30px;">
            <UploadImage :image.sync="user.shopImage" :limit="1" :type=1 />
            <!-- <Upload :default-image.sync="user.shopImage" :validWidth="750" :validHeight="750" :mode="6" />
						<span style="color:#ff8704;">图片限制750*750</span> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="margin-bottom: 30px;">
        <strong style="font-size: 14px;color: #606266;">店铺详情：</strong>
        <Tinymce ref="editor" v-model="user.shopRemark" :height="400" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">确定</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
import Upload from '@/components/Upload'
import Tinymce from '@/components/Tinymce'
import UploadImage from '@/components/UploadImage'
export default {
  name: 'ShopInfo',
  components: { Upload, Tinymce,UploadImage },
  data() {
    return {
      user: Object.assign({}, this.$store.getters.userInfo),
      rules: {
        shopName: [{ required: true, message: '请输入', trigger: 'blur' }],
        shopContactName: [{ required: true, message: '请输入', trigger: 'blur' }],
        shopContactMobile: [{ required: true, message: '请输入', trigger: 'blur' }],
        shopAddress: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    userInfo(val) {
      this.user = Object.assign({}, val)
    }
  },
  methods: {
    submit() {
      this.$refs['user'].validate((valid) => {
        if (valid) {
          const params = {
            shopName: this.user.shopName,
            shopContactWexin: this.user.shopContactWexin,
            shopContactQq: this.user.shopContactQq,
            shopContactName: this.user.shopContactName,
            shopContactMobile: this.user.shopContactMobile,
            shopAddress: this.user.shopAddress,
            shopMoney: this.user.shopMoney,
            shopRefundRate: this.user.shopRefundRate,
            shopRange: this.user.shopRange,
            shopDealDay: this.user.shopDealDay,
            shopBackendImage: this.user.shopBackendImage,
            shopImage: this.user.shopImage,
            shopRemark: this.user.shopRemark,
          }
          this.$store.dispatch('user/updateMember', params).then((res) => {
            this.$message({
              message: '编辑成功',
              type: 'success',
              duration: 5 * 1000
            })
          })
        } else {
          this.$message.error('您有必填字段未填写')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.shopInfo {
  padding: 40px 45px 20px 50px;
}
.flexInput {
  display: flex;
  width: 100%;
  .el-input {
    width: auto;
    flex: 1;
  }
}
</style>